<template>
    <div class="box">
      <div class="header">结算中心</div>
      <component is="Sanji"></component>
      <div class="place">
        <span>本单请支付</span>
        <span>￥392.12</span>
      </div>
      <div class="yong">使用第三方支付平台：</div>
      <div v-if="xia" class="xuanze">
        <span>下拉选择支付方式</span>
        <img @click="xial()" src="/static/lyl/xiala.png" alt="">
      </div>
      <ul v-if="con">
        <li v-for="(item,index) in data2">
          <div>
            <img :src="item.src2" alt="">
            <span>{{item.txt}}</span>
          </div>
          <div @click="can(index)" :class="{active:cur==index}" class="true">
            <img src="/static/lyl/feblei-20.png" alt="">
          </div>
        </li>
      </ul>
      <div v-if="shang" class="xuanze">
        <span>点击收起</span>
        <img @click="sho()" src="/static/lyl/shouqi.png" alt="">
      </div>
      <router-link to="/erwei">
        <button>确认支付</button>
      </router-link>
    </div>
</template>

<script>
  import Sanji from './Sanji'
    export default {
      name: "Jiesuan",
      data(){
        return {
          cur:0,
          xia:false,
          con:true,
          shang:true,
          data2:[
            {src2:'/static/lyl/zhifubao.png',txt:'支付宝支付'},
            {src2:'/static/lyl/weixin.png',txt:'微信支付'}
          ]
        }
      },
      methods:{
        can(i){
          this.cur = i;
        },
        xial(){
          this.xia = false;
          this.con = true;
          this.shang = true;
        },
        sho(){
          this.xia = true;
          this.con = false;
          this.shang = false;
        }
      },
      components:{
        Sanji
      }
    }
</script>

<style scoped>
   .box{
     background: #f2f2f2;
     padding-bottom: 24rem;
   }
   .header{
     font-size: 3.6rem;
     padding: 3rem 0;
     text-align: center;
     background: #e53e42;
     color: #fff;
   }
   .place{
     border-top: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
     background: #fff;
     margin: 2rem 0;
     padding: 3rem 2rem;
     display: flex;
     justify-content: space-between;
   }
   .place span{
     font-size: 2.8rem;
     line-height: 3.6rem;
   }
   .place span:nth-child(2){
     color: #e53e42;
   }
   .yong{
     background: #fff;
     padding: 3rem 2rem;
     font-size: 2.8rem;
     line-height: 3.6rem;
     border-top: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
   }
   ul{
     background: #fff;
   }
   ul li{
     border-bottom: 1px solid #ccc;
     padding: 2.5rem 2rem;
     display: flex;
     justify-content: space-between;
   }
   ul li div:nth-child(1) img{
     width: 5rem;
     margin-right: 1.8rem;
   }
   ul li div:nth-child(1) span{
     font-size: 2.8rem;
     line-height: 3.6rem;
     vertical-align: 50%;
   }
   ul li .true{
     width: 3rem;
     height: 3rem;
     line-height: 3rem;
     background: #ccc;
     border-radius: 50%;
     text-align: center;
     margin-top: 1rem;
   }
   ul li .active{
     background: #e53e42;
   }
   .xuanze{
     background: #fff;
     padding: 1.6rem 0;
     text-align: center;
   }
   .xuanze span{
     font-size: 2.8rem;
     line-height: 3.2rem;
     margin-right: 2rem;
   }
   .xuanze img{
     width: 2.6rem;
   }
   button{
     display: block;
     width: 59.8rem;
     height: 6.6rem;
     border-radius: 3.3rem;
     line-height: 6.6rem;
     font-size: 2.8rem;
     margin: auto;
     color: #fff;
     background: #e53e42;
     text-align: center;
     margin-top: 14rem;
   }
</style>
